import React, { memo } from "react";
import PropsTypes from "prop-types";
import { SettleSingerWrapper } from "./style";
import { fomatImgSizeY } from "@/utils/formatImgSize";

const SettleSinger = memo((props) => {
  const { artistLists} = props;
  return (
    <SettleSingerWrapper>
      <div className="header">
        <div className="headerLeft">入驻歌手</div>
        <div className="headerRight">查看全部&nbsp;&gt;</div>
      </div>
      <div className="mainContent ShunCursor">
        {artistLists.slice(0, 5).map((item, index) => {
          return (<div className="item" key={index}>
            <div className="itemLeft">
                <img src={fomatImgSizeY(item.picUrl,140)} alt="" />
            </div>
            <div className="itemRight">
                <div className="name">{item.name}</div>
                <div className="info">{item.alias}</div>
            </div>
          </div>)
        })}
      </div>
      <div className="footer">
        <a href="https://music.163.com/st/musician">申请成为网易音乐人</a>
      </div>
    </SettleSingerWrapper>
  );
});

SettleSinger.propTypes = {
  artistLists: PropsTypes.array,
};
SettleSinger.defaultProps = {
  artistLists: [],
};

export default SettleSinger;
